<template>
    <!-- component/wb-dialog/wb-dialog.wxml -->

    <view class="wx-popup" v-if="!flag">
        <view class="popup-container">
            <view class="wx-popup-title">{{ title }}</view>

            <view class="wx-popup-con">{{ content }}</view>

            <!-- <view class="divider_lightgray"></view> -->

            <slot name="slot1"></slot>

            <view class="wx-popup-btn">
                <text class="btn-no" @tap="noFun">{{ btn_no }}</text>
                <text class="btn-ok" @tap="okFun">{{ btn_ok }}</text>
            </view>
        </view>
    </view>
</template>

<script>
// component/wb-dialog/wb-dialog.js

export default {
    data() {
        return {
            flag: true
        };
    },
    options: {
        multipleSlots: true // 在组件定义时的选项中启用多slot支持
    },
    // 组件的属性列表
    props: {
        title: {
            // 属性名
            type: String,
            // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
            default: '标题' // 属性初始值（可选），如果未指定则会根据类型选择一个
        },

        // 弹窗内容
        content: {
            type: String,
            default: '内容'
        },
        // 弹窗取消按钮文字
        btn_no: {
            type: String,
            default: '取消'
        },
        // 弹窗确认按钮文字
        btn_ok: {
            type: String,
            default: '确定'
        }
    },
    // 组件的方法列表
    methods: {
        // 隐藏弹框
        hidePopup: function () {
            this.setData({
                flag: true
            });
        },
        // 展示弹框
        showPopup() {
            this.setData({
                flag: false
            });
        },
        // 内部私有方法建议以下划线开头,triggerEvent 用于触发事件
        noFun() {
            // 触发取消回调
            this.$emit('no');
        },
        okFun() {
            // 触发成功回调
            this.$emit('ok');
        }
    },
    created: function () {}
};
</script>
<style>
/* component/wb-dialog/wb-dialog.wxss */

.wx-popup {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.popup-container {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 80%;
    max-width: 600rpx;
    border: 1rpx solid #ccc;
    border-radius: 16rpx;
    box-sizing: bordre-box;
    transform: translate(-50%, -50%);
    overflow: hidden;
    background: #fff;
}

.wx-popup-title {
    width: 100%;
    padding: 24rpx 0rpx;
    text-align: center;
    font-size: 30rpx;
    border-bottom: 1rpx solid lightgray;
}

.wx-popup-con {
    margin: 24rpx 36rpx 0 36rpx;
    /* text-align: center; */
    font-size: 26rpx;
}

.wx-popup-btn {
    display: flex;
    justify-content: space-evenly;
    margin: 24rpx 0 24rpx 0;
}

.btn-no {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30%;
    height: 50rpx;
    border: 2rpx solid #ccc;
    border-radius: 50rpx;
    font-size: 26rpx;
}

.btn-ok {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30%;
    height: 50rpx;
    border: 2rpx solid #ccc;
    border-radius: 50rpx;
    font-size: 26rpx;
}

.divider_lightgray {
    width: 100%;
    height: 1rpx;
    background-color: lightgray;
}
</style>
